<script >
import Forget from "@/components/register&login/forget.vue";
import axios from "axios";

export default {
  components: {Forget},
  data(){
    return {
      formMsg:{
        username:"",
        password:"",
        rePassword:"",
        code:"",
        identity:"",
        email:"email",
        phone:"phone"
      },
      msg:""
    }
  },
  methods:{
    jumpLogin(){
      this.$router.push('/')
    },
    onVerify(){
      console.log("验证码")
      axios({
        method:"get",
        url:"http://localhost:5000/reader/generateCode",
        params:{
          phone:this.formMsg.phone
        }
      }).then((res)=>{
        this.$message({
          message: "获取成功！",
          type:"success"
        })
      })
    },
    onRegister(){
      console.log(this.formMsg.identity)
      axios({
        method:"get",
        url:"http://localhost:5000/register",

        params:{
            "reader_id":this.formMsg.username,
            "password":this.formMsg.password,
            "rePassword":this.formMsg.rePassword,
            "code":this.formMsg.code,
            "identity":this.formMsg.identity,
            "email":"email",
            "phone":this.formMsg.phone
        }

      }).then((res)=>{
          if(res.data.data ==='注册成功'){
            this.$message({
              message: res.data.data,
              type:"success"
            })

          }else {
            this.$message({
              message: res.data.data,
              type: "info"
            })
          }
        })
            .catch(error=>{
              console.log("失败")
            })
    }
  }
}
</script>

<template>
  <div class="bg">
    <div class="box">
      <div class="box-left"></div>

      <div class="box-right">
        <ul class="navigation">
          <li>
            <a class = "login" @click = jumpLogin>登录</a>
          </li>
          <li>
            <a class = "register" >注册</a>
          </li>
        </ul>
        <form >
          <input class="username" placeholder="请输入手机号/邮箱" v-model="formMsg.phone">
          <input class="password" placeholder="请输入密码" type="password" v-model="formMsg.password">
          <input class="password2" placeholder="确认密码" type="password" v-model="formMsg.rePassword">
          <input class="test" placeholder="请输入验证码" v-model="formMsg.code">
            <input type="radio" id="student" name = "type" value="0" class="radio" checked="checked" v-model="formMsg.identity" >
            <label for="student">我是学生</label>
            <input type="radio" id="teacher" name = "type" value="1" class="radio" v-model="formMsg.identity">
            <label for="teacher" >我是老师</label>
            <input type="button" value="注册" class="submit" @click="onRegister">
          <img src="../../assets/img/register&login/test.png" alt="获取验证码" class="testImg" @click =onVerify>
        </form>
        <div class="go"><p>已有帐号？<a class="goRegister" @click="jumpLogin" >去登录</a></p></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bg{
  width:100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-image: url("../../assets/img/register&login/login BG.png");
  background-size:100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.box{
  width: 80%;
  height: 80%;
  background-color: white;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  display: flex;
}
.box-left{
  width: 43%;
  height: 75%;
  float: left;
  margin: 6%;
  background-image: url("../../assets/img/register&login/register.jpg");
  background-size:100% 100%;
  background-repeat: no-repeat;
  border-radius: 60px;
  box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.25);
}
.box-right{
  float: left;
  padding-top: 5% ;
  width: 40%;
  height: 70%;

}
ul{
  margin-bottom: 4%;
  margin-top: 0;
}
li{
  display: inline-block;
  margin: 0 10px;
}
li>a{
  display: block;
  text-decoration: none;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: 71px;
  color: rgba(0, 0, 0, 1);
  font-family: "Arial Black",fantasy;

}
a.login{
  color: rgba(0, 0, 0, 0.5);
}
.login:hover{
  cursor: pointer;
  color: rgba(0, 0, 0, 0.68);
  border-bottom: 10px solid rgba(57, 74, 121, 1);
}
a.register{
  border-bottom: 10px solid rgba(57, 74, 121, 1);
}
.register:hover{
  cursor: default;
}
label{
  font-size: 120%;
  margin-right: 80px;
}
input{
  width:25vw;
  height:6vh;
  border-radius: 50px;
  padding: 5px 5px 5px 30px;
  background-repeat: no-repeat;
  background-position: 8px 0;
  font-size: 120%;
  margin-bottom: 3%;
  margin-left: 5%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
input.username{
  background-image: url("../../assets/img/register&login/user.png");
  background-size: 13% 100%;
  text-indent: 40px;
}
input.password{
  background-image: url("../../assets/img/register&login/psw.png");
  background-size: 13% 100%;
  text-indent: 40px;
}
input.password2{
  background-image: url("../../assets/img/register&login/psw.png");
  background-size: 13% 100%;
  text-indent: 40px;
}
input.test{
  background-image: url("../../assets/img/register&login/testLogo.png");
  background-size: 13% 100%;
  text-indent: 40px;
}
input.radio{
  width:3vw;
  height:2vh;
  box-shadow: none;
  margin-top: 6px;

}
.submit{
  height: 8vh;
  margin-left: 20%;
  margin-top: 1%;
  margin-bottom: 0;
  width: 60%;
  padding: 0;
  text-align: center;
  background: rgba(57, 74, 121, 1);
  font-size: 25px;
  color: white;
  border-radius: 25px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.submit:hover{
  cursor: pointer;
  background: rgba(79,90,151, 1);
}
.testImg{
  width: 80px;
  height: 36px;
  position: absolute;
  left:77vw;
  top: 62vh;
  border-radius: 25px;
  box-shadow: rgba(0, 0, 0, 0.16) 5px 5px 4px;
}
.testImg:hover{
  cursor: pointer;
}
a.goRegister{
  color: lightseagreen;
}
a.goRegister:hover{
  color: aqua;
  cursor: pointer;
}
div.go{
  font-size: 90%;
  text-indent: 180px;
}
form{
  padding: 0;
}
</style>